<template>
    <div>
        <p></p>

        <el-form :model='entity' :rules='rules' ref='form'  label-width='120px' class='dialog-form'>
            <el-row :span='24'>
                <el-col :span='24' style='margin-left:40px'>
                    <el-radio-group v-model="cls">
                        <el-col :span='2'>
                            <el-radio style="margin-left: 10px;margin-top: -5px" :label="10" >部门</el-radio>
                        </el-col>
                        <el-col :span='10'>
                            <el-form-item label="" prop="departmentId">
                                <department-select  style="margin-left: -100px "  v-model="entity.departmentId" :clearable="false"></department-select>
                            </el-form-item>
                        </el-col>
                        <!--<el-col :span='4'>-->
                        <!--&lt;!&ndash;<el-radio :label="20" border>班组</el-radio>&ndash;&gt;-->
                        <!--</el-col>-->
                        <!--<el-col :span='12'>-->
                            <!--<el-radio :label="20" border>班组</el-radio>-->
                        <!--</el-col>-->
                        <el-col :span='2'>
                            <el-radio style="margin-left: 60px;margin-top: -5px" :label="30" >员工</el-radio>

                        </el-col>
                        <el-col :span='10'>
                            <el-form-item style='width:100%' label=' ' prop='empname'>
                                <el-input  style="margin-left: -10px " disabled placeholder='员工' v-model='entity.employee.name'>
                                </el-input>
                            </el-form-item>

                        </el-col>
                    </el-radio-group>
                </el-col>
            </el-row>
                <el-row>

                <el-col :span='16'>
                    <el-form-item style="margin-left: -10px" label="日期">
                        <el-date-picker style="width:110%" v-model="entity.dateRange" type="daterange" range-separator="至"
                                        start-placeholder="开始日期" end-placeholder="结束日期"
                                        format="yyyy年MM月dd日"
                                        value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                    <el-col :span='8'>
                        <el-form-item label=" ">
                            <el-button type="primary" plain @click="deleteByRange">删除班次</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

            </el-row>
            <el-row>

                    <el-col :span='10'>
                        <el-form-item style='width:100%' label='班次1周期:天' prop='days1'>
                            <el-input  placeholder='连班天数，包括休息' v-model='entity.classMaster1.days'>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span='12'>
                        <el-form-item style='width:100%' label='班次' prop='classMasterId1'>
                            <el-button style="width:100%" type="primary" plain @click="findClass(1)">
                                {{entity.classMaster1.name?entity.classMaster1.name:"请选择班次"}}
                            </el-button>
                        </el-form-item>
                    </el-col>
            </el-row>
            <el-row>

                <el-col :span='10'>
                    <el-form-item style='width:100%' label='班次2周期:天' prop='days2'>
                        <el-input  placeholder='连班天数，包括休息' v-model='entity.classMaster2.days'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item style='width:100%' label='班次' prop='classMasterId2'>
                        <el-button :disabled="entity.classMaster2.days<1" style="width:100%" type="primary" plain @click="findClass(2)">
                            {{entity.classMaster2.name?entity.classMaster2.name:"请选择班次"}}
                            </el-button>

                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>

                <el-col :span='10'>
                    <el-form-item style='width:100%' label='班次3周期:天' prop='days3'>
                        <el-input  placeholder='连班天数，包括休息' v-model='entity.classMaster3.days'>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span='12'>
                    <el-form-item  style='width:100%' label='班次' prop='classMasterId3'>
                        <el-button :disabled="entity.classMaster3.days<1" style="width:100%" type="primary" plain @click="findClass(3)">
                            {{entity.classMaster3.name?entity.classMaster3.name:"请选择班次"}}
                        </el-button>

                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                <el-col :span='24'>
                    <el-form-item label=" ">
                        <el-checkbox  v-model='entity.noholiday'>不排节日、周休日</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <v-dialog ref="formDiag" :appendToBody="true" title="查找" :width="'48%'">
            <class-master-find  v-model="entity.classMasterId" :classNumber="classNumber" :confirmFind="confirmFind" :cancelFind="cancelFind">

                <!--<el-button type="primary" @click="$refs.formDiag.dispatch('submit')">确定</el-button>-->
                <!--<el-button type="default" @click="()=>{$refs.formDiag.hide();}">取消</el-button>-->
            </class-master-find>

        </v-dialog>
    </div>

</template>
<style lang="less" scoped>
    .merchantLogo .el-upload-dragger {
        img {
            height: 200px !important;
        }
    }

    .dialog-form {
        .el-radio-group {
            .el-radio {
                display: flex;
                align-items: center;
            }

            label {
                height: 40px;
            }
            .group-text {
                display: inline-block;
                width: 100px;
            }
            .title-text {
                display: inline-block;
                width: 120px;
            }
        }

    }
</style>

<script>

    const defaultEntity = {
        classCount: 1,
        qeuryMode:0, //department
        departmentId: null,	//  部门标识

        dateRange: [],
        employeeId: 0,	//  员工标识
        employee: {name: ''},

         noholiday: true,

         classMaster1: {
            classMasterId: -1,
            name:'请选择班次',
            days: 1,
        },
        classMaster2: {
            classMasterId: -1,
            name,
            days: 0,
        },
        classMaster3: {
            classMasterId: -1,
            name:'请选择班次',
            days: 0,
        },

    };
    import DepartmentSelect from '@/components/widgets/hr/DepartmentSelect.vue';
    import ClassMasterFind from '@/components/widgets/attend/ClassMasterMultiSelect.vue';

    export default {
        components: {DepartmentSelect,ClassMasterFind},
        data() {
            return {
                cls:10,
                classNumber :1,
                parentId:0,
                ruleTpl: {when: null, then: null},
                entity: _.cloneDeep(defaultEntity),
                dateRange: [],
                oldProps: [],
                ruleDefs: [],
                isDisabled: false,
                limitTotal: false,
                rules: {
                    custNo: [
                        {required: true, message: "编号不能为空", trigger: "blur"},
                        {
                            min: 1,
                            max: 6,
                            message: "长度在 1 到 6 个字符",
                            trigger: "blur"
                        }
                    ],

                    startOn: [
                        {
                            required: true,
                            message: "请选择开始时间",
                            trigger: "blur"
                        }
                    ],
                    merchantId: [
                        {
                            type: "number"
                        }
                    ],
                    status: [
                        {
                            type: "number",
                            required: true,
                            message: "请选择状态",
                            trigger: "change"
                        }
                    ],


                }
            };
        },
        methods: {
            findClass(classNumber) {
                this.classNumber = classNumber
                this.$refs.formDiag.show();

            },
            confirmFind(row) {
                this.$refs.formDiag.hide();
                var classMaster = row;
                // this.$api.attend.attend.ClassMasterService.findById(row.classMasterId).then(rsp => {
                //   console.log(JSON.stringify(rsp))
                // })
                console.log("classMaster:")
                console.log(JSON.stringify(classMaster))
                this.entity.classCount=3;
                if (this.classNumber === 1) {
                    this.entity.classMaster1.classMasterId = classMaster.classMasterId;
                    this.entity.classMaster1.name = classMaster.name;

                }
                if (this.classNumber === 2) {
                    this.entity.classMaster2.classMasterId = classMaster.classMasterId;
                    this.entity.classMaster2.name = classMaster.name;
                }
                if (this.classNumber === 3) {
                    this.entity.classMaster3.classMasterId = classMaster.classMasterId;
                    this.entity.classMaster3.name = classMaster.name;
                }
                console.log("entity:")
                console.log(JSON.stringify(this.entity))

            },
            cancelFind() {
                this.$refs.formDiag.hide();
            },
            getProps(scope) {
                return this.entity.props.filter(p => p.propScope == scope);
            },
            onRuleDefsLoaded(opts) {
                this.ruleDefs = opts || [];
                this.resetProps();
            },
            onDiscountTypeChange(val) {

            },
            resetProps() {


            },
            setValues(vals) {
                this.resetEntity = _.cloneDeep(vals);
                this.entity = _.cloneDeep(this.resetEntity);
            },
            //根据部门，日期范围删除
            deleteByRange() {
                this.$api.attend.attend.EmployeeClassService.deleteByRange(this.entity).then(rsp => {
                    this.$msgJsonResult(rsp);

                });

            },
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        let params = Object.assign({}, this.entity);
                        //排班
                        this.$api.attend.attend.EmployeeClassService.schedule(this.entity).then(rsp => {
                            this.$msgJsonResult(rsp)
                            if (rsp.code === 200) {
                                this.$emit("saved", rsp);
                            }
                        });
                    }
                });
            },
            resetForm() {
                //this.$refs["form"].resetFields();
                this.entity = _.cloneDeep(defaultEntity);
                this.entity.dateRange = [this.$dongxwDict.formatDateZero(new Date()), this.$dongxwDict.formatDateZero(new Date())];

            },


            init(options)
                {
                    this.resetForm();
                    if (options.employeeClassId) {

                    this.$api.attend.attend.EmployeeClassService.findById(options.employeeClassId).then(r => {

                        this.entity = r.data;
                    });
                } else {
                    this.isDisabled = false;
                }
            }
        },
        mounted() {
            this.$on("init", this.init);
            this.$on("submit", this.submitForm);
        }
    };
</script>
